import { useMount, useReactive } from "ahooks";
import { useState } from "react";

import { DataMap } from '@grapecity/wijmo.grid';
import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid';

const WijmoB0202 = () => {


    const Countries = [
        { id: 0, name: 'US' },
        { id: 1, name: 'Germany' },
        { id: 2, name: 'UK' },
        { id: 3, name: 'Japan' },
        { id: 4, name: 'Italy' },
        { id: 5, name: 'Greece' }
    ]
    const Cities = [
        { id: 0, country: 0, name: 'Washington' },
        { id: 1, country: 0, name: 'Miami' },
        { id: 2, country: 0, name: 'Seattle' },
        { id: 3, country: 1, name: 'Bonn' },
        { id: 4, country: 1, name: 'Munich' },
        { id: 5, country: 1, name: 'Berlin' },
        { id: 6, country: 2, name: 'London' },
        { id: 7, country: 2, name: 'Oxford' },
        { id: 8, country: 2, name: 'Bath' },
        { id: 9, country: 3, name: 'Tokyo' },
        { id: 10, country: 3, name: 'Sendai' },
        { id: 11, country: 3, name: 'Kobe' },
        { id: 12, country: 4, name: 'Rome' },
        { id: 13, country: 4, name: 'Florence' },
        { id: 14, country: 4, name: 'Milan' },
        { id: 15, country: 5, name: 'Athens' },
        { id: 16, country: 5, name: 'Santorini' },
        { id: 17, country: 5, name: 'Thebes' }
    ]

    const [Data, setData] = useState()
    const Map = useReactive({
        CountriesMap: new DataMap(Countries, 'id', 'name'),
        CitiesMap: new DataMap(Cities, 'id', 'name')
    })


    useMount(() => {
        const data = Cities.map((item, i) => ({
            country: item.country,
            city: Cities[i].id,
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        }))

        Map.CitiesMap.getDisplayValues = (dataItem) => {
            let validCities = Cities.filter(v => v.country === dataItem.country)
            return validCities.map(city => city.name);
        }
        setData(data)
    })

    if (Data) {
        return (
            <div className="Page">
                <FlexGrid autoGenerateColumns={false} itemsSource={Data}>
                    <FlexGridColumn header="Country" binding="country" width='*' dataMap={Map.CountriesMap} />
                    <FlexGridColumn header="City" binding="city" width='*' dataMap={Map.CitiesMap} />
                    <FlexGridColumn header="Downloads" binding="downloads" width='*' format="n0" />
                    <FlexGridColumn header="Sales" binding="sales" width='*' format="n0" />
                </FlexGrid>
            </div>
        );
    }

};

export default WijmoB0202;